

/*

-#CFDFC2 light green
-#CFD5EF light blue
#4F7D32 dark green border
- #49577E dark blue
- #657DD3 medium blue (background for inactive tab)
- #7BA75C medium green (background for inactive tab)

these are the old styles used in pages like:
	http://localhost/companyadmin/travel_approval_admin.asp
*/

.tabmaindiv
{
	BACKGROUND-COLOR: #d4dfff;
	padding:10px;
	width:98%;
	border-left:1px thin outset;
	border-right:1px thin outset;
	border-bottom:1px thin outset;
}

.tab
{
    COLOR: black;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: #efe7e7
}
.tab A
{
    COLOR: black;
    TEXT-DECORATION: none
}
.tab A:active
{
    COLOR: black;
    TEXT-DECORATION: none
}
.tab A:visited
{
    COLOR: black;
    TEXT-DECORATION: none
}
.tab A:hover
{
    COLOR: black;
    TEXT-DECORATION: underline
}
.tabselected
{
    FONT-WEIGHT: bold;
    COLOR: navy;
    FONT-FAMILY: Verdana, Arial;
    BACKGROUND-COLOR: #d4dfff
}
.tabselected A
{
    FONT-WEIGHT: bold;
    COLOR: navy;
    TEXT-DECORATION: none
}

.tabselected A:active
{
    FONT-WEIGHT: bold;
    COLOR: navy;
    TEXT-DECORATION: none
}
.tabselected A:visited
{
    FONT-WEIGHT: bold;
    COLOR: navy;
    TEXT-DECORATION: none
}
.tabselected A:hover
{
    FONT-WEIGHT: bold;
    COLOR: navy;
    TEXT-DECORATION: underline
}




/* new classes, for use on travelhome.asp and expenseportal.asp */

ul.ottab {
	position:relative;
	display: block;
	margin:0px 0px 0px 0px;
	padding: 3px 0px 3px 0px;
	left:0px;
	top: 1px;
	text-align:left;
	list-style-type:none;
	white-space: nowrap;
	border-bottom: 1px solid #c0c0c0;
	z-index:104;
	background-color:Transparent;
	font-size: 8pt; font-family: tahoma, arial, helvetica, sans-serif;font-weight:normal;
	padding-bottom:3px;

}

.lefttabdiv ul.ottab {
	border-bottom: 1px solid #99BBE8;
}

ul.ottab li
{
	list-style-type:none;
	white-space: nowrap;
	display: inline;
	margin:0px 5px 0px 0px; padding:0px 0px 0px 0px;
}

ul.ottab li.first {
	padding-right:0px;
}

ul.ottab li.inline {

}

ul.ottab li.last {
	display:none;
}


/* tab colors*/
ul.ottab a
{
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 7px; padding-right:7px;

	border-top:1px solid #c0c0c0;
	border-right:solid 1px #c0c0c0;
	border-left:solid 1px #c0c0c0;
	position: relative;

	border-top-right-radius : 3px;
	-moz-border-radius-topright : 3px;
	-webkit-border-top-right-radius : 3px;

	border-top-left-radius : 3px;
	-moz-border-radius-topleft	: 3px;
	-webkit-border-top-left-radius : 3px;

}
ul.ottab  a.inactivetab {
	text-decoration:none;
	background-color: #e9eef7; color: #696969;
}

ul.ottab li a:hover {
	text-decoration:none;
	color: blue;
}

ul.ottab a.activetab, ul.ottab a.activetab:hover {
	text-decoration:none;
	z-index: 105;
	top:1px;
	padding-top: 4px;
	position: relative;
	font-weight:bold;background-color: #f6f6f7; color: #696969

}



/*
	tabcontent requires two different divs to fix W3C box model problems.
	because IE doesn't deal well with padding.
*/

.tabcontent
{
	background-color: #f6f6f7;
	border:1px #c0c0c0 solid;
	top:0px;
	position:relative;
	padding-top:1px;
	margin-bottom: 16px;
}

.tabcontent-inner
{
	margin:8px 8px 8px 8px;
}

.tabcontentmessage
{
	/*
		be very careful not to have a table/div under this with width:100%
		because the padding will cause problems in IE
		And the item under it will be too wide
	*/
	background-color: White;
	border:1px solid #c0c0c0;
	padding:5px 5px 5px 5px;
}

.tabcontenttable
{
	/*
		use this one instead of tabcontentmessage if you have a table.
	*/

	background-color: White;
	border:1px solid #c0c0c0;
	
}


.tabcontenttableheader
{
	background-color: white;
	border-bottom:1px solid silver;
	margin-top: 2px;
	padding-bottom: 2px;
}

.tabcontenttableheader a
{
	text-decoration: none;
	padding-left: 2px;
}

.tabcontenttableheader img
{
	padding-bottom: 2px;
}

.tabbackground
{
	background-color: #f6f6f7;;
}


/* override lefttabdiv with the blue colors*/
.lefttabdiv .tabcontent
{
	background-color: #F6F9FF;;
	border:1px solid #99BBE8;
}

.lefttabdiv .tabcontent-inner
{
	margin:8px 4px 0px 4px;
	padding-bottom: 4px;
}

.lefttabdiv ul.ottab li
{
	margin:0px 2px 0px 0px; padding:0px 0px 0px 0px;
}
.lefttabdiv ul.ottab li a
{
	border-top:solid 1px #99BBE8;
	border-left:solid 1px #99BBE8;
	border-right:solid 1px #99BBE8;
	border-top-right-radius : 3px;
	-moz-border-radius-topright : 3px;
	-webkit-border-top-right-radius : 3px;

	border-top-left-radius : 3px;
	-moz-border-radius-topleft	: 3px;
	-webkit-border-top-left-radius : 3px;
}

.lefttabdiv ul.ottab li a:hover {
	text-decoration:none;
	color: blue;
}

.lefttabdiv ul.ottab li a.activetab, .lefttabdiv ul.ottab li a.activetab:hover {
	background-color: #F6F9FF; color: black; font-weight:bold;
}

.lefttabdiv ul.ottab a {
	padding-left:5px; padding-right:5px;
}
.lefttabdiv ul.ottab a.inactivetab {
	background-color: #E9EEF7; font-weight:normal; color: #696969;
}



